<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html debug="true">
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery dimenions.js Visual Test</title>
		
		<!-- load latest build of jquery.js -->
		<script type="text/javascript" src="tests/jquery.js"></script>
		
		<!-- load firebug lite
		<script type="text/javascript" src="../../../../firebug/firebug.js"></script> -->

		<!-- load dimensions.js (this is what we're testing! -->
		<script type="text/javascript" src="../jquery.dimensions.js"></script>
		
		
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$('#userAgent').html(navigator.userAgent);
				
				$('a.offset').click(function(event) {
					var href = this.href;
					var id = href.substr(href.indexOf('#'));
					var offset = $(id).offset();
					var time = (new Date()).getTime();
					//console.log(((new Date()).getTime() - time) + ' milliseconds');
					$('#moveable').css(offset);
					var props = '';
					for (prop in offset)
						props += prop + ': ' + offset[prop] + '\n';
					//console.log(props);
					return false;
				});
				
				$('a.absolute').click(function(event) {
					var href = this.href;
					var id = href.substr(href.indexOf('#'));
					var pos = $(id).position();
					$(id).css('position', 'absolute').css( pos );
					return false;
				});
			});
		</script>

		<link rel="Stylesheet" media="screen" href="../../../jquery/test/data/testsuite.css" />
		
		<style>
			p, fieldset { margin-left: 20px; }
			fieldset { width: 560px; }
			#moveable{ position: absolute; top: 110px; left: 250px; width: 30px; height: 30px; border: 2px solid #000; background-color: #ccc; }
			
			#forceScroll { height: 500px; }
			
			#static { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
			#staticChild1 { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color:  #092; }
			#staticChild2 { position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
			
			#relative { position: relative; top: 5px; left: 5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
			#relativeChild1 { position: relative; top: 5px; left: 5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color:  #092; }
			#relativeChild2 { position: relative; top: -5px; left: -5px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
			
			#absolute { position: absolute; top: 200px; right: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
			#absoluteChild1 { position: absolute; top: -100px; right: -10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 150px; height: 150px; background-color:  #092; }
			#absoluteChild2 { position: absolute; top: 100px; right: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
			
			#absolute2 { position: absolute; top: 300px; left: 400px; margin: 5px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #822; }
			#relative2 { position: relative; top: 50px; left: 50px; margin: 5px; border: 2px solid #000; padding: 3px; width: 300px; height: 300px; background-color: #092; }
			#static2 { overflow: hidden; position: static; margin: 5px; border: 2px solid #000; padding: 3px; width: 250px; height: 250px; background-color: #980; }
			#relative3 { overflow: auto; position: relative; top: 10px; left: 10px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #822; }
			#absolute3 { position: absolute; top: 30px; right: -90px; margin: 5px; border: 2px solid #000; padding: 3px; width: 200px; height: 200px; background-color: #092; }
			#static3 { position: static; margin: 10px; border: 2px solid #000; padding: 3px; width: 250px; height: 250px; background-color: #980; }
			
			#inline, #inline2 { display: inline; border: 2px solid #000; }
			
			#fixed { position: fixed; top: 0; right: 0; margin: 10px; border: 2px solid #000; padding: 3px; width: 100px; height: 100px; background-color: #980; }
		</style>
	</head>
	<body>
		<h1 id="banner">jQuery dimensions.js - Test/Demo for .offset()/.position()</h1>
		<h2 id="userAgent"></h2>
		<p>Select a div to move the grey box too.</p>
		<ul>
			<li><a href="#static" class="offset">Move to static 1</a> | <a href="#static" class="absolute">Make Absolute</a></li>
			<li><a href="#staticChild1" class="offset">Move to static child 1</a> | <a href="#staticChild1" class="absolute">Make Absolute</a></li>
			<li><a href="#staticChild2" class="offset">Move to static child 2</a> | <a href="#staticChild2" class="absolute">Make Absolute</a></li>
			<li><a href="#relative" class="offset">Move to relative 1</a> | <a href="#relative" class="absolute">Make Absolute</a></li>
			<li><a href="#relativeChild1" class="offset">Move to relative child 1</a> | <a href="#relativeChild1" class="absolute">Make Absolute</a></li>
			<li><a href="#relativeChild2" class="offset">Move to relative child 2</a> | <a href="#relativeChild2" class="absolute">Make Absolute</a></li>
			<li><a href="#absolute" class="offset">Move to absolute 1</a> | <a href="#absolute" class="absolute">Make Absolute</a></li>
			<li><a href="#absoluteChild1" class="offset">Move to absolute child 1</a> | <a href="#absoluteChild1" class="absolute">Make Absolute</a></li>
			<li><a href="#absoluteChild2" class="offset">Move to absolute child 2</a> | <a href="#absoluteChild2" class="absolute">Make Absolute</a></li>
			<li><a href="#absolute2" class="offset">Move to absolute 2</a> | <a href="#absolute2" class="absolute">Make Absolute</a></li>
			<li><a href="#relative2" class="offset">Move to relative 2</a> | <a href="#relative2" class="absolute">Make Absolute</a></li>
			<li><a href="#static2" class="offset">Move to static 2</a> | <a href="#static2" class="absolute">Make Absolute</a></li>
			<li><a href="#relative3" class="offset">Move to relative 3</a> | <a href="#relative3" class="absolute">Make Absolute</a></li>
			<li><a href="#absolute3" class="offset">Move to absolute 3</a> | <a href="#absolute3" class="absolute">Make Absolute</a></li>
			<li><a href="#static3" class="offset">Move to static 3</a> | <a href="#static3" class="absolute">Make Absolute</a></li>
			<li><a href="#inline" class="offset">Move to inline 1</a> | <a href="#inline" class="absolute">Make Absolute</a></li>
			<!-- <li><a href="#fixed">Move to fixed 1</a> | <a href="#fixed" class="absolute">Make Absolute</a></li> -->
			<!-- <li><a href="#relativeChild3">Move to relative child 3</a> | <a href="#relativeChild3" class="absolute">Make Absolute</a></li> -->
		</ul>
		
		
		<div id="static"> Static 1
			<div id="staticChild1"> Static Child 1
				<div id="staticChild2"> Static Child 2</div>
			</div>
		</div>
		
		<div id="relative"> Relative 1
			<div id="relativeChild1"> Relative Child 1
				<div id="relativeChild2"> Relative Child 2</div>
			</div>
		</div>
		
		<div id="absolute"> Absolute 1
			<div id="absoluteChild1"> Absolute Child 1
				<div id="absoluteChild2"> Absolute Child 2</div>
			</div>
		</div>
		
		<div id="absolute2"> Absolute 2
			<div id="relative2"> Relative 2
				<div id="static2"> Static 2
					<div id="relative3"> Relative 3
						<div id="absolute3"> Absolute 3
							<div id="static3"> Static 3
								<div id="inline">Inline 1</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!-- <div id="fixed"> Fixed 1
			<div id="inline2">Inline 2</div>
		</div> -->
		
		<div id="moveable"></div>
		
		<div id="forceScroll"></div>
	</body>
</html>